<!--  -->
<template>
  <div class='task'>
    <!--        头部-->
    <head-top></head-top>

    <div style="width: 100%;height: 50px;"></div>
    <div class="vantTabs">
      <van-tabs sticky title-active-color="#fbef1a" @click="clickTitle">
        <van-tab v-for="(item,index) in taskList" :key="index">
          <template #title>{{ item.title }}</template>
          <div class="search">
            <div class="searchpd">
              <input placeholder="商家名(旺旺号)/店铺名/商家微信/商家QQ" v-model="page.query"/>
              <p @click="queryBus()">查询</p>
            </div>
          </div>
          <div style="width: 100%;height: 100px;"></div>
          <div class="taskcon">
            <van-list
                v-model="loading"
                :finished="finished"
                :immediate-check="false"
                finished-text="没有更多了"
                @load="onLoad"
            >
              <div v-if="tabFlag == 0 || tabFlag == 1">
                <div class="item" v-for="(item,index) in list" :key="index">
                  <div>{{ item.shopName }}</div>
                  <ul>
                    <li>
                      <div>添加时间</div>
                      <div class="reslut">{{ item.createTime }}</div>
                    </li>
                    <li>
                      <div>对接商务</div>
                      <div class="reslut">{{ item.nickName }}</div>
                    </li>
                    <li>
                      <div>状态</div>
                      <div class="reslut">{{ item.shopStatus }}</div>
                    </li>
                    <li v-if="currentTag == 0 && item.shopStatus == '拉黑'">
                      <div>拉黑理由</div>
                      <div class="reslut">{{ item.blockReason }}</div>
                    </li>
                  </ul>
                  <router-link v-show="currentTag == 1" tag="div" :to="{path:'/createBusiness',query:{id:item.id}}"
                               class="editor">
                    编辑
                  </router-link>
                  <div v-show="currentTag == 1" @click="clickDelete(index,item.id)" class="editor" style="margin-top: 10px">
                    删除
                  </div>
                </div>
              </div>
              <div v-if="tabFlag == 2">
                <div class="item" v-for="(item,index) in list" :key="index" >
                  <!--                        <div>{{item.shopName}}</div>-->
                  <ul>
                    <li>
                      <div>店铺名</div>
                      <div class="reslut">{{ item.shopName }}</div>
                    </li>
                    <li>
                      <div>店铺网站</div>
                      <div class="reslut">{{ item.shopUrl }}</div>
                    </li>
                    <li>
                      <div>店铺来源</div>
                      <div class="reslut">{{ item.shopResource }}</div>
                    </li>
                    <li>
                      <div>合作方式</div>
                      <div class="reslut">{{ item.cooperateMode == 1?'全托':'半托' }}</div>
                    </li>
                    <li>
                      <div>商家真实姓名</div>
                      <div class="reslut">{{ item.shopRealName }}</div>
                    </li>
                    <li>
                      <div>商家电话</div>
                      <div class="reslut">{{ item.shopPhone }}</div>
                    </li>
                    <li>
                      <div>商家微信</div>
                      <div class="reslut">{{ item.shopWeixin }}</div>
                    </li>
                    <li>
                      <div>商家qq</div>
                      <div class="reslut">{{ item.shopQq }}</div>
                    </li>
                    <li>
                      <div>掌柜名(旺旺号)</div>
                      <div class="reslut">{{ item.shopAccount }}</div>
                    </li>
                  </ul>
                  <button  @click="audit(item.id)" v-if="item.shopStatus == '申请中'"  class="audit">
                    审核
                  </button>
                  <div  @click="clickDelete(index,item.id)" class="editor" style="margin-top: 10px">
                    删除
                  </div>
                </div>
              </div>
            </van-list>
          </div>

        </van-tab>
      </van-tabs>
    </div>
    <div style="width: 100%;height: 60px;background: #f8f8f8;"></div>
    <div class="resetBut">
      <router-link tag="div" to="/createBusiness" class="button">新增</router-link>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from ‘《组件路径》‘;
import headTop from "../../components/base/headTop.vue"
import shopApi from "@/api/shop"
import {Toast} from "vant";

export default {
//import引入的组件需要注入到对象中才能使用
  components: {
    headTop
  },
  data() {

    return {
      page: {
        pageNo: 1,
        pageSize: 10,
        query: '',

      },
      taskList: [],
      list: [],
      currentTag: 0,
      loading: false,
      finished: false,
      tabFlag: 0,
    };
  },
//监听属性 类似于data概念
  computed: {},
//监控data中的数据变化
  watch: {},

  methods: {
    clickTitle(name) {

      this.page.query = ''
      this.page.pageNo = 1
      this.tabFlag = name
      console.log(this.currentTag)
      // if (this.currentTag == 1) {
      if (name == 1) {
        shopApi.myList(this.page).then(res => {
          console.log(res.data.records)
          this.list = res.data.records
          console.log(this.list)
          this.finished  = false

        })
      } else if (name == 0) {
        this.list = []
      } else if (name == 2) {

        shopApi.auditList(this.page).then(res => {
          console.log(this.page.pageNo)
          console.log(res)
          this.list = res.data.records
          console.log(this.list)
          this.finished  = false
        })

      }
      this.currentTag = name

    },

    shopTabListLoad(){
      shopApi.shopTabList().then(res=>{
        console.log(res)
        this.taskList = res.data.records
      })
    },
    clickDelete(index,id){
      shopApi.deleteShop(id).then(res=>{
        console.log(res)
        shopApi.myList(this.page).then(data => {
          this.list = data.data.records
        })

      })


    },
    // 审核
    audit(id){
      let json = {
        "id": id,
        "taskStatus": "2"
      }
    shopApi.auditShop(json).then(res=>{
      Toast(res.message)
      this.page.pageNo = 1
      this.page.query = ''
      shopApi.auditList(this.page).then(res => {
        this.list = res.data.records
      })
      this.currentTag = 2
    })
    },
    onLoad() {
      this.page.pageNo += 1
      console.log(this.page.pageNo)
      console.log(this.currentTag)
      if (this.currentTag== 2) {
        shopApi.auditList(this.page).then(res => {
          console.log(res)
          var tal = res.data.pages
          console.log(tal)
          this.list = this.list.concat(res.data.records)
          this.loading = false;
          if (tal == 1) {
            this.page.pageNo = 1
          }
          if (tal == 0){
            this.page.pageNo = 0
          }
          if (this.page.pageNo == tal) {
            this.finished = true;
            this.page.pageNo = 1

          }
        })
      } else {
        shopApi.myList(this.page).then(res => {
          console.log(res)
          var tal = res.data.pages
          this.list = this.list.concat(res.data.records)
          if (this.currentTag == 0) {
            this.list = []
          }
          // this.list.push.apply(res.data.records)
          console.log(this.list)
          this.loading = false;
          if (tal == 1) {
            this.page.pageNo = 1
          }
          if (tal == 0) {
            this.page.pageNo = 0
          }
          if (this.page.pageNo == tal) {
            this.finished = true;
            this.page.pageNo = 1
          }

        })
      }
    },
    queryBus() {
      this.page.pageNo = 1
      if (this.currentTag == 0) { // 核实商家
        shopApi.checkList(this.page).then(res => {
          this.list = res.data.records
        })
      } else if(this.currentTag == 2){
        shopApi.auditList(this.page).then(res => {
          this.list = res.data.records
        })
      }else {
        shopApi.myList(this.page).then(res => {
          this.list = res.data.records
        })
      }
    }

  },

  created() {
    this.shopTabListLoad()
    if (this.currentTag == 0) {
      this.list = []
    }
  },

  mounted() {

  },
  beforeCreate() {
  },
  beforeMount() {
  },
  beforeUpdate() {
  },
  updated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  activated() {
  }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.task {
  width: 100%;
  min-height: 100%;
  background: #f8f8f8;
}

.vantTabs {
  width: 100%;

  /deep/ .van-tabs__line {
    width: 33.33%;
    background: #f8f5be;
  }

  /deep/ .van-sticky {
    width: 100%;
    position: fixed;
    top: 50px;
    left: 0;
  }

  .search {
    width: 100%;
    background: white;
    position: fixed;
    top: 94px;
    left: 0;

    .searchpd {
      padding: 10px;
      display: flex;
      align-items: center;

      input {
        flex: 1;
        text-indent: 20px;
        background: #f4f4f4;
        border-radius: 5px;
        height: 30px;
        line-height: 30px;
      }

    }
  }

  .taskcon {
    width: 100%;
    background: white;

    .item {
      padding: 10px;

      ul {
        width: 100%;

        li {
          display: flex;
          justify-content: space-between;
          padding: 5px 0;
          align-items: center;
          font-size: 14px;
          color: #727271;

          .reslut {
            text-align: right;
            overflow: hidden;
            width: 100%;
            color: black;

          }
        }
      }
      .audit {
        width: 98%;
        padding: 5px 0;
        border-radius: 20px;
        /*color: white;*/
        text-align: center;
        background: #f8f5be;
        display: block;
        margin: 0 auto;
        border: none
      }
      .editor {
        width: 98%;
        padding: 5px 0;
        border-radius: 20px;
        /*color: white;*/
        text-align: center;
        background: #f8f5be;
        margin: 0 auto;
      }
    }
  }
}

.resetBut {
  width: 100%;
  background: white;
  position: fixed;
  left: 0;
  bottom: 0;
  padding-bottom: 10px;

  .button {
    margin: 0 auto;
    width: 90%;
    border-radius: 30px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #f8f5be;
  }

}
</style>
